Eloquent JavaScript: A Modern Introduction to Programming: Designing for Flexibility: The Table Interface

The foundation of a flexible system lies in defining a rigid internal contract or interface that objects must follow. In this context, we define a Table Interface where every cell object guarantees the existence of three specific methods: minWidth(), minHeight(), and draw(width, height).

1. The Interface Contract

By standardizing on these methods, the layout logic can calculate global row and column dimensions without knowing the internal data types of individual cells. This is a classic example of Interface-based Polymorphism.

2. TextCell Implementation

The TextCell constructor prepares raw input by splitting strings into line-by-line arrays. This shifts complexity from the rendering phase to the instantiation phase.

this.text = text.split("\n");

3. Deterministic Drawing

The draw(width, height) method ensures that every cell output is perfectly padded using a repeat() helper. This maintains vertical and horizontal alignment regardless of content length.

$$\text{Padding} = \text{Width} - \text{line.length}$$

TERMINAL bash — 80x24

> Ready. Click "Run" to execute.

QUESTION 1

What is the primary benefit of the Table Interface contract in this design?

It forces all data to be strings.

It allows the layout engine to remain agnostic of the data it displays.

It speeds up JavaScript memory allocation.

It automatically creates HTML tables.

QUESTION 2

In TextCell.prototype.minWidth, why is reduce used?

To sum the length of all lines.

To find the longest line length in the cell.

To remove empty lines.

To convert the array back into a string.

✅ Correct!

It uses Math.max within reduce to distill the array of lines down to a single maximum width value.

QUESTION 3

What does TextCell.prototype.draw(width, height) return?

A single long string with newline characters.

A canvas object for rendering.

An array of strings, each exactly 'width' characters wide.

A boolean indicating if the draw was successful.

QUESTION 4

What is the purpose of the repeat helper function?

To handle cell borders.

To add padding spaces to ensure straight columns.

To duplicate rows for larger tables.

To loop through the cell array.

❌ Incorrect

repeat is a utility for string padding, which is critical for visual alignment in text tables.

QUESTION 5

How does TextCell handle a multi-line string input?

It rejects it as invalid data.

It stores it as an array using split('\n').

It replaces newlines with spaces.

It only keeps the first line.

❌ Incorrect

The constructor breaks the input down so minHeight and minWidth can perform calculations on the lines.

Case Study: The Modular Billboard System

Applying Interface Contracts to Physical Layouts

Imagine a physical modular billboard system where every advertisement panel must fit into a standardized metal frame. Whether a panel contains a single word or a full paragraph, the installer only needs to know the panel's dimensions (minWidth/minHeight) and how to 'draw' (bolt) it in.

Explain how the 'installer' in this scenario represents the table layout function in our code.

Solution:
The installer is the layout engine. They don't need to know the 'content' (the ad) of the panel, only that it obeys the dimensions and can be drawn. This decoupling allows the billboard to host any panel type interchangeably.

If we wanted to create a 'RedTextCell' that prints red text but otherwise behaves the same, which part of the interface contract would change?

Solution:
Only the implementation of the draw method would change to include color codes. minWidth and minHeight would remain the same, proving the interface protects the layout logic from visual implementation details.